<template>
  <div class="content">
    <div class="player-wrapper">
      <div class="player-inner">
        <mu-appbar>
          <mu-icon-button icon='arrow_back' @click="back"  slot="left"/>
            <div class="play-title">
              <div class="play-name"><span>{{audio.name}}</span></div>
              <div class="play-singer"> {{audio.singer}} </div>
            </div>
          <mu-icon-button icon='favorites' :class="{'icon-yellow':isCollected}" slot="right" @click="collect" />
        </mu-appbar>
         <div class="bar-line"></div>
         <mu-flexbox orient="vertical" class="main">
           <mu-flexbox-item order="0">
              <div class="cd-holder" :class="{'cd-play': playing}">
                <div class="stick"></div>
                <div class="cd-wrapper" :class="{'cd-rotate': playing}">
                  <div class="cd-mask">
                  </div>
                  <img class="cd-img" :src="audio.albumPic"/>
                </div>
              </div>
            </mu-flexbox-item>
           <mu-flexbox-item order="2" class="bottom-wrapper">
             <div class="process-bar">
               <div class="pro-slider">
                 <mu-slider class="song-slider" v-model="prCurrentTime" @change="changeTime" />
               </div>
               <div class="time">
                 <time class="cur">{{currentTime | time}}</time>
                 <time class="total">{{durationTime | time}}</time>
               </div>
             </div>
             <div class="control-bar">
               <mu-icon-button class="btn d-mode" />
              <!--<mu-icon-button>
                <i class="favorites"></i>
              </mu-icon-button>-->
               <mu-icon-button class="btn d-prev" @click="playPrev" />
               <mu-icon-button class="btn d-play btn-big" @click="togglePlay" :class="{'d-pause': playing}"/>
               <mu-icon-button class="btn d-next" @click="playNext" />
               <mu-icon-button class="btn d-list" @click="showList" />
             </div>
           </mu-flexbox-item>
         </mu-flexbox> 
      </div>
    </div>
    <div class="mask">
      <div class="album-cover" :style="{'background-image':'url(' + audio.albumPic + '?param=500y500' + ')'}"></div>
      <div class="cover-mask"></div>
    </div>
    <mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup">
      {{collectStatus}}
    </mu-popup>
    <mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup_sec">
      您还未登录！请先登录
    </mu-popup>
    <PlayList ref="bottomSheet"></PlayList>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'
  import qs from 'qs'
  import PlayList from '../components/playList'
  export default {
    data () {
      return {
        time: 'dsd',
        collectStatus: '',
        topPopup: false,
        topPopup_sec: false,
        isCollected: false
      }
    },
    components: {
      PlayList
    },
    watch: {
      topPopup (val) {
        if (val) {
          setTimeout(() => {
            this.topPopup = false
          }, 1500)
        }
      },
      topPopup_sec (val) {
        if (val) {
          setTimeout(() => {
            this.topPopup_sec = false
          }, 1500)
        }
      }
    },
    methods: {
      ...mapMutations([
        'playNext',
        'playPrev'
      ]),
      back () {
        this.$router.go(-1)
        this.$store.commit('toggleDetail')
      },
      togglePlay () {
        if (this.playing) {
          this.$store.commit('pause')
          document.getElementById('audioPlay').pause()
        } else {
          this.$store.commit('play')
          document.getElementById('audioPlay').play()
        }
      },
      changeTime (value) {
        var time = (value * this.durationTime) / 100
        this.$store.commit('changeTime', time)
        this.$store.commit('setChange', true)
      },
      showList () {
        this.$refs.bottomSheet.show()
      },
      unCollect () {
        this.isCollected = false
      },
      collect () {
        const uId = localStorage.getItem('uId')
        const data = qs.stringify({
          uId: uId,
          mId: this.$route.params.id
        })
        if (!uId) {
          this.topPopup_sec = true
          return
        }
        this.$http.post('http://hongtaofans.cn/music/user/collectmusic', data)
        .then((res) => {
          if (res.data.status === 1) {
            this.collectStatus = '收藏成功！'
            this.topPopup = true
            this.isCollected = true
          } else {
            this.collectStatus = '该曲目已收藏！'
            this.topPopup = true
            this.isCollected = true
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'currentTime',
        'bufferedTime',
        'durationTime',
        'prCurrentTime',
        'audio',
        'playing'
      ])
    },
    filters: {
      time (value) {
        var length = Math.floor(parseInt(value))
        var minute = Math.floor(value / 60)
        if (minute < 60) {
          minute = '0' + minute
        }
        var second = Math.floor(length % 60)
        if (second < 10) {
          second = '0' + second
        }
        return minute + ':' + second
      }
    }
  }
</script>

<style lang="less" scoped>
  .content {
    overflow: hidden;
    min-height: 25rem;
    height: 100%;
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
  }

  .album-cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    -webkit-filter: blur(1.2rem);
    filter: blur(1rem);
    -webkit-transform: scale(1.05)
  }

  .cover-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 4
  }

  .player-wrapper .player-inner {
    position: relative;
    z-index: 20;
    box-sizing: border-box;
  }

  .player-wrapper .play-title {
    line-height: 1rem;
    box-sizing: border-box;
  } 
  
  .play-title .play-name {
    font-size: 17px;
    padding-top: 0.6rem;
    line-height: 1.2;
  }
  .play-title .play-singer {
    color: #a8a7a7;
    font-size: 14px;
    padding-bottom: 0.2rem;
  }

  .mu-appbar {
    background: transparent;
  }

  .bar-line {
     display: block;
      bottom: 0 ;
      left: 0;
      width: 100%;
      height: 0.05rem;
      background: radial-gradient(#d3d3d3 -90%, transparent 100%)
  }

  .main {
    height: 100%;
  }
    
    // cd部分样式
  .player-wrapper .cd-holder {
      position: relative;
      overflow: hidden;
      .stick {
        position: absolute;
        width: 4rem;
        height: 6rem;
        right: 30%;
        background: url("../../static/stick_bg.png") no-repeat left -.4rem;
        background-size: cover;
        z-index: 8;
        -webkit-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
      }
      .cd-wrapper {
        position: relative;
        max-width: 65%;
        min-height: 80px;
        padding: 1.1rem 1rem .8rem 1.2rem;
        border-radius: 50%;
        background: rgba(107, 107, 107, 0.3);
        margin: 3rem auto 0; 
        -webkit-animation: rotating 10s  linear .3s infinite;
         animation: rotating 10s linear .3s infinite;
        .cd-mask {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: url('../../static/cd_wrapper.png') no-repeat center center;
          background-size: cover;
        }
        img {
          width: 8rem;
          height: 8rem;
          min-height: 80px;
          border-radius: 50%;
        }
      }
    }

  // cd播放状态样式
  .player-wrapper .cd-play {
    .stick {
      background-position-y: -.7rem;
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
    .player-wrapper .cd-rotate {
      -webkit-animation: rotating 10s  linear .3s infinite;
      animation: rotating 10s linear .3s infinite;
    }
  }
  .player-wrapper .cd-rotate {
    -webkit-animation: rotating 10s  linear .3s infinite;
    animation: rotating 10s linear .3s infinite;
  }

  .bottom-wrapper {
    padding: 2.5rem 1rem 0;
    color: #fff;
    align-items: flex-end;
  }

  //进度条
  .process-bar {
    position: relative;
  }

  .pro-slider {
    position: relative;
    margin: 0 2rem;
    padding: 1rem 0 0;
  }
  
  .time time {
    position: absolute;
    top: 54%;
    opacity: .5;
  }

  .cur {
    left: 0;
  }

  .total {
    right: 0;
  }

  //控制按钮
  .control-bar {
    text-align: center;
  }
  .btn {
    width: 2.5rem;
    height: 2.5rem;
  }

  .d-mode {
    background: url("../../static/seq.png") no-repeat;
    background-size: cover;
  }

  .d-prev {
    background: url("../../static/prev.png") no-repeat;
    background-size: cover;
  }
   
  .d-play {
    background: url("../../static/play.png") no-repeat;
    background-size: cover;
  }
  
  .d-pause {
    background: url("../../static/pause.png") no-repeat;
    background-size: cover;
  }

  .d-next {
    background: url("../../static/next.png") no-repeat;
    background-size: cover;
  }

  .d-list {
    background: url("../../static/list.png") no-repeat;
    background-size: cover;
  }
  .icons-gray {
    color: #aaa!important;
  }
  .icon-yellow {
    color: #CE3D3E!important;
  }
</style>
